<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="rgb(107,60,94)" status-bar left-icon="left"
			left-text="返回" title="会议室座位预约" @clickLeft="back" />

		<!-- <uni-combox :border="false" :candidates="candidates" placeholder="请输入或选择教学楼" class="choose"> -->
		<!-- </uni-combox> -->
		<view class="example-body">
			<uni-forms>
				<uni-title type="h1" title="选择地点"></uni-title>
				<uni-row class="demo-uni-row">
					<uni-col :span="12" v-for="item in candidates" class="state-btn-content">
						<!-- <button type="default" style="margin: 5px;">{{item}}</button> -->
						<button style="margin: 5px;" :class="active == item ? 'choose':'active'" type="default"
							@click="buildchoose(item)">{{item}}</button>
					</uni-col>
				</uni-row>

				<view v-show="true" class="uni-pb-5">
					<uni-title type="h1" title="选择日期&时间"></uni-title>
					<text style="color: #BBBBBB;">tips:只开放提前三天的预约噢！！</text>
					<view>
						<uni-segmented-control :current="current" :values="currentDate" @clickItem="onClickItem"
							styleType="button" activeColor="rgb(107,60,94)"></uni-segmented-control>
						<view
							style="margin-top: 10px;align-items: center;justify-content: center;border: rgb(107,60,94) 0px solid;">
							<view v-show="current === 0">
								<!-- {{currentDate}} -->
				
								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)" ></uni-data-checkbox>
				
							</view>
							<view v-show="current === 1">
								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)" ></uni-data-checkbox>
							</view>
							<view v-show="current === 2">
								<uni-data-checkbox multiple mode="button" :localdata="times"
									selectedColor="rgb(107,60,94)" ></uni-data-checkbox>
							</view>
						</view>
					</view>
					<!-- <uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" /> -->
				
				</view>
				<view v-show="true">
					<uni-title type="h1" title="选择会议室"></uni-title>
					<!-- <uni-data-picker placeholder="请选择机房/机位" popup-title="请选择机房/机位" :localdata="dataTree"
						v-model="classes" color="rgb(107, 60, 94)">
					</uni-data-picker> -->
					<view class="uni-list">

						<view class="seatchoose">
							<view class="seatleft">
								当前选择：
							</view>
							<view class="seatright">
								<picker @change="bindPickerChange" :value="index" :range="array" range-key="name"class="seatright">
									<view >{{array[index].name}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>



				<!-- <view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 单选窗口
					</view>
					<view class="action">
						<button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">Radio</button>
					</view>
				</view>

				<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop="">
						<radio-group class="block" @change="RadioChange">
							<view class="cu-list menu text-left">
								<view class="cu-item" style="margin: 30rpx;" v-for="(item,index) in 20" :key="index">
									<label class="flex justify-between align-center flex-sub" >
										<view class="flex-sub">座位 {{index +1}}</view>
										<radio class="round" :class="radio=='radio' + index?'checked':''"
											:checked="radio=='radio' + index?true:false" :value="'radio' + index">
										</radio>
									</label>
								</view>
							</view>
						</radio-group>
					</view>
				</view> -->



			</uni-forms>
			<navigator url="../reserve/tip_success"><button type="default" class="btn">确定</button></navigator>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				active: '',
				currentDate: this.GetTime(),
				title: 'picker',
				array: [{
					name: 'A01'
				}, {
					name: 'A02'
				}, {
					name: 'A03'
				}, {
					name: 'A04'
				}, {
					name: 'A05'
				}, {
					name: "A06"
				}, {
					name: "A07"
				}, {
					name: "A08"
				}, {
					name: "A09"
				}, {
					name: "A10"
				}, {
					name: "A11"
				}, {
					name: "A12"
				}],
				index: 0,

				multiIndex: [0, 0, 0],


				candidates: ["国光四", "笃行五", "映雪三", "芙蓉二十八", "南光一百六十九", "南强洞洞拐"],

				times: [{
					text: '8:00 - 9:30  ',
					value: 0
				}, {
					text: '9:30 - 11:00  ',
					value: 1
				}, {
					text: '11:00 - 12:30  ',
					value: 2
				}, {
					text: '12:30 - 14:00  ',
					value: 3
				}, {
					text: '14:00 - 15:30  ',
					value: 4
				}, {
					text: '15:30 - 17:00  ',
					value: 5
				}, {
					text: '17:00 - 18:30',
					value: 6
				}, {
					text: '18:30 - 20:00',
					value: 7
				}, {
					text: '20:00 - 21:30',
					value: 8
				}, {
					text: '21:00 - 10:30',
					value: 9
				}],


				gutter: 0,
				nvueWidth: 730,
				classes: '1-2',
				
				datetimerange: [],

				current: 0,
				CustomBar: this.CustomBar,
				modalName: null,
				radio: 'radio1',
				
			}
		},
		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		//  endDate() {
		// 		return this.getDate('end');
		// 	}
		// },
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				})
			},
			selectState(e) {
				this.whichSelected = e.currentTarget.dataset.state
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			buildchoose(item) {
				this.active = item;
			},
			//获取时间
			GetTime() {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 1; //获取当前月份
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000


				var daytimeArr = [];

				var now = new Date(base);
				var myear = now.getFullYear();
				var month = now.getMonth() + 1;
				var mday = now.getDate()
				daytimeArr.push([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))

				for (var i = 1; i < 3; i++) { //前七天的时间
					var now = new Date(base += oneDay);
					var myear = now.getFullYear();
					var month = now.getMonth() + 1;
					var mday = now.getDate()
					daytimeArr.push([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))
				}
				return daytimeArr
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},


		},

	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.seatchoose {
		font-size: 16px;
		display: flex;
		margin-top: 10px;
		border: rgb(220, 223, 230) 1px solid;
		border-radius: 20rpx;
		padding: 5px;
	}

	.seatleft {
		padding-right: 10px;
		align-content: center;
		margin-right: 40rpx;
	}

	.seatright {
		align-self: center;
		justify-content: center;
		align-content: center;
		left: 20%;
		width: 400rpx;
		/* margin-left: 10%; */
	}

	.container {
		font-size: 14px;
		line-height: 24px;
		padding: 0 2 2 2px;
	}

	.choose {
		color: #FFFFFF;
		background-color: rgb(107, 60, 94);

	}

	.btn {
		background-color: rgb(107, 60, 94);
		color: white;
		margin-top: 50rpx;
	}

	/* unirow用到的style */
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	/*教学楼按钮*/
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;

	}

	.uni-pb-5 {
		padding-bottom: 5px;
		flex: auto;
	}

	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}
</style>
<style lang="scss">
	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}
</style>
